<template>
  <div class="zuicoolAlert" v-if="visible" @click="hide">
    <div
      class="board"
      :style="{marginTop: topOffset + 'px'}"
      @click.stop
    >
      <button class="close" @click="hide"/>

      <p class="title" v-html="title"/>

      <p class="content" v-html="content"/>

      <button class="confirm" @click="confirm">
        {{labelText || '确定'}}
      </button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "zuicool-alert",

    props: {
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      labelText: {
        type: String,
        default: '确定'
      },
      show: {
        type: Boolean,
        default: false
      },
      topOffset: {
        type: Number,
        default: -20
      }
    },

    data() {
      return {
        visible: this.show,
        boardMarginTop: 0
      }
    },

    watch: {
      show(val) {
        this.visible = val;
      },
    },

    methods: {
      hide() {
        this.$emit('hide');
        this.$emit('update:show', false);
      },

      confirm() {
        this.$emit('confirm');
        this.hide();
      },
    }
  }
</script>

<style lang="less" scoped>
  .zuicoolAlert {
    z-index: 99;
    position: fixed;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    font-size: 14px;
    text-align: center;

    color: #343434;
    background-color: rgba(0, 0, 0, .5);
  }

  .board {
    position: absolute;

    margin-left: -132px;
    border-radius: 10px;
    padding: 20px;
    width: 225px;

    top: 50%;
    left: 50%;

    background-color: #fff;

    transform: translateY(-50%);
  }

  .content {
    max-width: 100%;

    letter-spacing: .1em;
    white-space: pre-wrap;
  }

  .confirm {
    margin-top: 35px;
    border-radius: 19px;
    width: 164px;
    height: 38px;

    font-size: inherit;

    background: linear-gradient(to right, #FF4D3B, #FD935B);
    color: #fff;
  }

  .close {
    position: absolute;
    top: 5px;
    right: 5px;

    border-radius: 10px;
    width: 20px;
    height: 20px;

    color: #fff;
    line-height: 20px;

    background-color: #ababab;
    transform: rotateZ(45deg);
    &:before, &:after {
      content: '';
      display: inline-block;

      position: absolute;
      left: 10%;

      width: 80%;
      height: 1px;

      background-color: white;
    }
    &:after {
      transform: rotateZ(90deg);
    }
  }
</style>
